<template>
  <div class="tip_warp">
    <div class="tip">
      <div class="top">
        <div class="closebutton" @click="closetip()">
          <div class="closebutton_x"></div>
          <div class="closebutton_y"></div>
        </div>
      </div>
      <div class="middle">
        <div class="inner" v-for="(item,index) in json" :key="index" >
          <p class="title">{{item.title}}</p>
          <p class="content">{{item.content}}</p>
        </div>
      </div>
    </div>
  </div>
</template>

<script>

export default {
  name: 'tip_nochoose',
  props: ['tipfile'],
  data () {
    return {
      json: []
    }
  },
  mounted () {
    this.json = this.tipfile
  },
  methods: {
    closetip () {
      this.$emit('closetip')
    }
  }
}
</script>

<style lang="scss" scoped>
  .tip_warp {
    background-color: rgba(38,38,38,0.45);
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 10;
    color: #FFF;
    .tip {
      position: absolute;
      top: 45%;
      left: 50%;
      -webkit-transform: translateX(-50%) translateY(-50%);
      -moz-transform: translateX(-50%) translateY(-50%);
      -ms-transform: translateX(-50%) translateY(-50%);
      transform: translateX(-50%) translateY(-50%);
      width: 75%;
      max-height: 80%;
      overflow: auto;
      margin: 0 auto;
      border-radius: px2rem(31);
      background-color: #FFF;
      .top {
        width: 100%;
        height: px2rem(50);
        /*border: px2rem(2) solid red;*/
        .closebutton{
          width: px2rem(30);
          height: px2rem(44);
          /*border: px2rem(2) solid red;*/
          float: right;
          margin: px2rem(6) px2rem(18) 0 0;
          position: relative;
          @mixin closebutton{
            position: absolute;
            top: 50%;
            width: px2rem(35);
            height: px2rem(2);
            border-radius: px2rem(2);
          }
          .closebutton_x{
            @include closebutton;
            background-color: black;
            // 旋转、居中
            -webkit-transform:  translateY(-50%) rotate(45deg);
            -moz-transform:  translateY(-50%) rotate(45deg);
            -ms-transform:  translateY(-50%) rotate(45deg);
            transform:translateY(-50%) rotate(45deg);
            // 颜色渐变
            background: -webkit-linear-gradient(to right,#496CE4, #896CE2); /* Safari 5.1 - 6.0 */
            background: -o-linear-gradient(to right,#496CE4, #896CE2); /* Opera 11.1 - 12.0 */
            background: -moz-linear-gradient(to right,#496CE4, #896CE2); /* Firefox 3.6 - 15 */
            background: linear-gradient(to right,#496CE4, #896CE2); /* 标准的语法 */

          }
          .closebutton_y{
            @include closebutton;
            // 旋转、居中
            -webkit-transform:translateY(-50%) rotate(135deg);
            -moz-transform:  translateY(-50%) rotate(135deg);
            -ms-transform: translateY(-50%) rotate(135deg);
            transform:  translateY(-50%) rotate(135deg);
            // 颜色渐变
            background: -webkit-linear-gradient(to right,#496CE4, #896CE2); /* Safari 5.1 - 6.0 */
            background: -o-linear-gradient(to right,#496CE4, #896CE2); /* Opera 11.1 - 12.0 */
            background: -moz-linear-gradient(to right,#496CE4, #896CE2); /* Firefox 3.6 - 15 */
            background: linear-gradient(to right,#496CE4, #896CE2); /* 标准的语法 */
          }
        }
      }
      .middle {
        width: 75%;
        /*border: px2rem(2) solid red;*/
        margin: 0 auto;
        padding: 0 0 px2rem(40) 0;
        .inner{
          /*border: px2rem(2) solid #6CF;*/
          margin-bottom: px2rem(10);
          .title{
            /*border: px2rem(2) solid #6CF;*/
            width: 100%;
            line-height: px2rem(25);
            margin-bottom: px2rem(4);
            font-weight: bold;
            font-size: $text-size-imp;
            color: #1270E3;
          }
          .content{
            /*border: px2rem(2) solid #6CF;*/
            width: 100%;
            line-height: px2rem(17);
            font-size: $text-size-small;
            color: $text-color;
          }
        }
      }
    }
  }
</style>
